<script setup>
import { reactive, onMounted, nextTick, ref } from 'vue'
// 响应式状态
const state = reactive({
  count: 0
})

const myCount = ref(null)

// 用来修改状态、触发更新的函数
function increment() {
  state.count++
  // 注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。
  // 若要等待一个状态改变后的 DOM 更新完成
  // DOM 更新时机
  console.log('更新前的myCount', myCount.value.getAttribute('count'), myCount.value.innerText);
  nextTick(() => {
    console.log('更新后的myCount', myCount.value.getAttribute('count'), myCount.value.innerText);
  })
}

onMounted(() => {
  console.log('初识count值为', state.count)
})
</script>

<template>
  <button @click="increment">count++</button>
  <h1 ref="myCount" v-bind="state">{{ state.count }}</h1>
</template>

<style></style>
